<template>
	<view class="recommend-box">
		<view class="recommend-item" 
		v-for="(item,index) in menuData" 
		:key="index"
		@click="handleShop(item.shop_id, item.id, item.name)"
		>
			<image :src="item.image" class="recommend-image"></image>
			<text class="recommend-title">{{item.name || ''}}</text>
		</view>
	</view>
</template>


<script>
	export default {
		name: "WanlPageMenu",
		props: {
			pageData: {
				type: Object,
				default: function() {
					return {
						name: '菜单组件',
						type: 'menu',
						params: [],
						style: [],
						data: []
					}
				}
			}
		},
		data(){
			return{
				menuData:[],
			}
		},
		mounted() {
			this.loadData();
		},
		// 1.0.2升级
		methods:{
			handleShop(shopId, category_id, category_name) {
				this.$wanlshop.to(
					`/pages/shop/product/list?shop_id=${shopId}&category_id=${category_id}&category_name=${category_name}`
				);
			},
			async onLink(url){
				this.$wanlshop.on(url);
			},
			loadData(){
				uni.request({
					url: '/index/index',
					data: {
					},
					success: res => {
						this.menuData = res.data.shop_sort;
					}
				});
			}
		}
	}
</script>

<style scoped lang="scss">
	.wanlpage-menu .picicon {
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}
	
	.recommend-box{
		margin-top: 20rpx;
		margin-bottom: 39rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0rpx 0rpx;
	}
	
	.recommend-item{
		width: 25%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	
	.recommend-image{
		width: 104rpx;
		height: 116rpx;
	}
	
	.recommend-title{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
	}
	
</style>
